<template>
  <div class="container">
    <div class="head-container item">
      <div class="title">确诊患者管理</div>
      <el-button-group class="checkout-btn-group">
        <el-button class="checkout-btn" @click="queryTableData">
          <i class="el-icon-refresh"></i>
          <span>刷新</span>
        </el-button>
      </el-button-group>
      <div class="search-container">
        <el-input class="query-input"
                  placeholder="请输入姓名"
                  v-model="key"
                  clearable>
        </el-input>
        <el-button class="search-btn" @click="queryTableData">搜索</el-button>
      </div>

    </div>
    <div class="table-container item">
      <el-table
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            prop="base.name"
            label="姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="base.idCard"
            label="身份证号码"
            width="200">
        </el-table-column>
        <el-table-column
            prop="base.gender"
            label="性别"
            width="80">
        </el-table-column>
        <el-table-column
            prop="base.address"
            label="住址"
            width="250">
        </el-table-column>
        <el-table-column
            prop="onsetDate"
            label="住院日期"
            width="150">
        </el-table-column>
        <el-table-column
            prop="infectionSource"
            width="180"
            label="感染来源">
        </el-table-column>
        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click.native.prevent="viewMessage(scope.row)">
              详情
            </el-button>
            <el-button type="success" size="mini" @click.native.prevent="toSafeBtn(scope.row)">
              转为治愈
            </el-button>
            <el-button type="danger" size="mini" @click.native.prevent="toDeathBtn(scope.row)">
              转为死亡
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="pagination"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="pageSize"
          :page-sizes="[5,10,15]"
          :current-page.sync="pageNum"
          :total="total">
      </el-pagination>
    </div>
    <el-dialog
        title="确诊详情信息"
        :visible.sync="messageDialogVisible"
        :before-close="confirmMsg"
        width="53%">
      <div class="dialog-content">
        <div class="base-message content-container">
          <div class="dialog-base-title">基本信息</div>
          <el-table
              class="dialog-base-table"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="selectRowData"
              border>
            <el-table-column
                prop="base.name"
                label="姓名"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.gender"
                label="性别"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.age"
                label="年龄"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.idCard"
                label="身份证号码">
            </el-table-column>
            <el-table-column
                :show-overflow-tooltip="true"
                prop="base.address"
                label="地址"
                width="160">
            </el-table-column>
            <el-table-column
                prop="base.phone"
                label="电话"
                width="160">
            </el-table-column>
          </el-table>
        </div>
        <div class="treatment-message content-container">
          <div class="dialog-base-title treatment-message-tittle">治疗信息</div>
          <el-button class="treatment-message-button" @click="updateTreatmentMsg">
            {{ treatmentMessageReadOnly ? "修改" : "取消" }}
          </el-button>
          <el-button class="treatment-message-submit treatment-message-button" v-if="!treatmentMessageReadOnly"
                     @click="updateTreatmentMessage">提交
          </el-button>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                感染源
              </template>
              <el-input :readonly="treatmentMessageReadOnly"
                        v-model="treatmentMsg.infectionSource"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                住院时间
              </template>
              <el-date-picker
                  :readonly="treatmentMessageReadOnly"
                  v-model="treatmentMsg.onsetDate"
                  format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                是否重症
              </template>
              <el-select v-model="treatmentMsg.critical" style="width: 100%" placeholder="请选择"
                         :disabled="treatmentMessageReadOnly">
                <el-option
                    v-for="item in ['是','否']"
                    :key="item"
                    :label="item"
                    :value="item">
                </el-option>
              </el-select>
              <!--              <el-input :readonly="treatmentMessageReadOnly" v-model="treatmentMsg.critical"></el-input>-->
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                发病症状
              </template>
              <el-input :readonly="treatmentMessageReadOnly" v-model="treatmentMsg.symptoms"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                诊治医院
              </template>
              <el-input :readonly="treatmentMessageReadOnly" v-model="treatmentMsg.hospital"></el-input>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                信息备注
              </template>
              <el-input :readonly="treatmentMessageReadOnly" v-model="treatmentMsg.note"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="inspects-message content-container">
          <div class="dialog-base-title">核酸检测信息</div>
          <el-table class="dialog-base-table"
                    :header-cell-style="{'text-align':'center'}"
                    :cell-style="{'text-align':'center'}"
                    :data="inspects"
                    border>
            <el-table-column
                prop="testDate"
                label="检测时间">
            </el-table-column>
            <el-table-column
                prop="nuTest"
                label="检测结果">
            </el-table-column>
            <el-table-column
                prop="ctTest"
                label="CT结果">
            </el-table-column>

          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="confirmMsg">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="转为治愈"
        :visible.sync="toSafeDialogVisible"
        width="50%">
      <div class="dialog-content">
        <div class="base-message content-container">
          <div class="dialog-base-title">基本信息</div>
          <el-table
              class="dialog-base-table"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="selectRowData"
              border>
            <el-table-column
                prop="base.name"
                label="姓名"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.gender"
                label="性别"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.age"
                label="年龄"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.idCard"
                label="身份证号码">
            </el-table-column>
            <el-table-column
                prop="base.address"
                label="地址"
                width="160">
            </el-table-column>
            <el-table-column
                prop="base.phone"
                label="电话"
                width="160">
            </el-table-column>
          </el-table>
        </div>
        <div class="content-container">
          <div class="dialog-base-title treatment-message-tittle">治愈信息</div>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                出院时间
              </template>
              <el-date-picker
                  v-model="cureMsg.dischargeDate"
                  type="date"
                  format="yyyy-MM-dd"
                  placeholder="选择日期">
              </el-date-picker>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                现状
              </template>
              <el-input v-model="cureMsg.current"></el-input>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="toSafeDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="toCure">确 定</el-button>
  </span>
    </el-dialog>
    <el-dialog
        title="转为死亡"
        :visible.sync="toDeathDialogVisible"
        width="50%">
      <div class="dialog-content">
        <div class="base-message content-container">
          <div class="dialog-base-title">基本信息</div>
          <el-table
              class="dialog-base-table"
              :header-cell-style="{'text-align':'center'}"
              :cell-style="{'text-align':'center'}"
              :data="selectRowData"
              border>
            <el-table-column
                prop="base.name"
                label="姓名"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.gender"
                label="性别"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.age"
                label="年龄"
                width="80">
            </el-table-column>
            <el-table-column
                prop="base.idCard"
                label="身份证号码">
            </el-table-column>
            <el-table-column
                :show-overflow-tooltip="true"
                prop="base.address"
                label="地址"
                width="160">
            </el-table-column>
            <el-table-column
                prop="base.phone"
                label="电话"
                width="160">
            </el-table-column>
          </el-table>
        </div>
        <div class="content-container">
          <div class="dialog-base-title treatment-message-tittle">死亡信息</div>
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template slot="label">
                死亡时间
              </template>
              <el-date-picker
                  v-model="deathTime"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="toDeathDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="toDeath">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>

import {formatDate} from "@/utils/date";
import {getPatientList, toDeath, tuCure, updatePatient} from "@/api/patient";

export default {
  name: "PatientManagementPage",
  data() {
    return {
      key: null,
      tableData: [],
      pageSize: 5,
      pageNum: 1,
      total: 1,
      messageDialogVisible: false,
      selectRowData: null,
      inspects: [],
      formatDate: formatDate,
      treatmentMessageReadOnly: true,
      treatmentMessageBtn: "修改",
      treatmentMsg: {
        infectionSource: '',
        onsetDate: '',
        critical: '',
        symptoms: '',
        hospital: '',
        note: ''
      },
      toSafeDialogVisible: false,
      cureMsg: {
        dischargeDate: null,
        current: ''
      },
      toDeathDialogVisible: false,
      deathTime: null,


    };
  },
  methods: {
    toDeath() {
      this.deathTime = formatDate(this.deathTime, "yyyy-MM-dd");
      toDeath(this.selectRowData[0].baseId, this.deathTime).then(res => {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.toDeathDialogVisible = false;
        this.queryTableData();
      })
    },
    toDeathBtn(row) {
      this.selectRowData = [];
      this.selectRowData.push(row)
      this.toDeathDialogVisible = true;
    },
    confirmMsg() {
      this.messageDialogVisible = false;
      this.treatmentMessageReadOnly = true;
      this.queryTableData();
    },
    toCure() {
      this.cureMsg.dischargeDate = formatDate(this.cureMsg.dischargeDate, "yyyy-MM-dd");
      tuCure(this.selectRowData[0].baseId, this.cureMsg).then(res => {
        this.toSafeDialogVisible = false;
        this.$message({
          message: res.message,
          type: "success"
        });
        this.queryTableData();
      }).catch(e => {
        this.$message({
          message: e.message,
          type: "error"
        });
      })
    },
    toSafeBtn(row) {
      this.selectRowData = [];
      this.selectRowData.push(row)
      this.toSafeDialogVisible = true;
    },
    updateTreatmentMessage() {
      this.treatmentMsg.onsetDate = formatDate(this.treatmentMsg.onsetDate, "yyyy-MM-dd");
      updatePatient(this.selectRowData[0].baseId, this.treatmentMsg).then(res => {
        this.$message({
          message: res.message,
          type: "success",
        })
        this.treatmentMessageReadOnly = true;
      })
    },
    updateTreatmentMsg() {
      if (this.treatmentMessageReadOnly) {
        this.treatmentMessageReadOnly = false;
      } else {
        this.treatmentMessageReadOnly = true;
        this.viewMessage(this.selectRowData[0])
      }

    },
    viewMessage(row) {
      this.messageDialogVisible = true;
      this.selectRowData = [];
      this.inspects = row.inspects;
      this.inspects.forEach(i => {
        i.testDate = formatDate(new Date(i.testDate), "yyyy-MM-dd")
      })
      this.treatmentMsg.infectionSource = row.infectionSource;
      this.treatmentMsg.onsetDate = row.onsetDate;
      this.treatmentMsg.critical = row.critical;
      this.treatmentMsg.symptoms = row.symptoms;
      this.treatmentMsg.hospital = row.hospital;
      this.treatmentMsg.note = row.note;
      this.selectRowData.push(row);

    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryTableData();
    },
    handleSizeChange(val) {
      this.pageNum = 1;
      this.pageSize = val;
      this.queryTableData()
    },
    queryTableData() {
      console.log(this.pageSize)
      getPatientList(this.pageNum, this.pageSize,this.key).then(res => {
        let pageInfo = res.data;
        pageInfo.list.forEach(item => {
          item.onsetDate = formatDate(new Date(item.onsetDate), "yyyy-MM-dd")
        })
        this.tableData = pageInfo.list;
        this.total = pageInfo.total;
        this.pageSize = pageInfo.pageSize;
        this.pageNum = pageInfo.pageNum;
      })
    }
  },
  mounted() {
    this.queryTableData();

  }

}
</script>

<style scoped>
.container {
  border-top: 3px solid #3c8dbc;
  border-radius: 3px;
  background-color: white;
  margin-left: 20px;
  margin-right: 20px;
}

.item {
  margin-right: 10px;
  margin-left: 10px;
}

.table-container {
  text-align: center;
}

.checkout-btn-group {

}

.checkout-btn {
  margin-top: 10px;
  margin-bottom: 10px;
}

.title {
  font-size: 20px;
  padding-top: 10px;
}

.pagination {
  padding-top: 20px;
  padding-bottom: 20px;
}

.search-container {
  display: inline-block;
  float: right;
}

.query-input {
  display: inline-block;
  margin-right: 10px;
  width: 180px;
}

.dialog-base-title {
  font-size: 15px;
  padding: 5px;
  display: inline-block;
}

.dialog-base-table {
  width: 100%;
}

.content-container {
  margin-top: 20px;
  background-color: #E9EEF3;
}


.treatment-message-button {
  height: 24px;
  align-items: center;
  padding: 3px 15px;
  margin-left: 20px;
  color: #E9EEF3;
  background-color: #3d9970;
  border-color: #3d9970;
}

.treatment-message-submit {
  background-color: #409EFF;
  border-color: #409EFF;
}

</style>
